<template>
  <el-row :gutter="15">
    <el-col
      v-for="(ctrId, index) in colOrder"
      :key="'form_' + ctrId + '_' + index"
      :span="formColSpan[ctrId]"
      v-show="showCol[ctrId]"
    >
      
      <transition name="el-zoom-in-top">
        <el-form-item
          :label="itemMeta[ctrId].formItemMeta.label"
          :prop="itemMeta[ctrId].formItemMeta.colName"
          :rules="ruleMeta[ctrId] ?? []"
          :label-width="itemMeta[ctrId].formItemMeta.labelWidth??''"
          :size="size"
          v-show="showCol[ctrId]"
        >
          <component
            :is="formItemKey[itemMeta[ctrId].formItemMeta.controlType]"
            :model="model"
            v-bind="itemMeta[ctrId]"
          >
          </component>
        </el-form-item>
      </transition>
    </el-col>
  </el-row>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { ElFormItem, ElRow, ElCol } from 'element-plus'

  // 引入表单子控件
  import { formItemKey } from '../form-item/_map-form-item'

  export default defineComponent({
    name: 'nf-el-from-item-base',
    components: {
      ElFormItem, ElRow, ElCol
    },
    props: {
      colOrder: {
        type: Array
      },
      itemMeta: {
        type: Object
      },
      ruleMeta: {
        type: Object
      },
      showCol: {
        type: Object
      },
      formColSpan: {
        type: Object
      },
      model: {
        type: Object
      },
      size: [String]

    },
    setup(props, context) {

      const slots = context.slots
      const slotsKey = Object.keys(slots)
      // console.log('slotsKey', slotsKey)

      // eslint-disable-next-line vue/no-setup-props-destructure
      // const formItemMeta = props.itemMeta?.formItemMeta ?? {}

      return {
        // formItemMeta, // 低代码的 表单子控件需要的属性
        formItemKey, // 子控件字典 : config.formItem
        slotsKey
      }
    }
  })
</script>